<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="utf-8">
  <title>layui分页2</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
 <!-- 搜索栏信息 -->
 <div class="demoTable">
  搜索名字：
  <div class="layui-inline">
    <input class="layui-input" name="id" id="demoReload" autocomplete="off">
  </div>
  <button class="layui-btn" data-type="reload">搜索</button>
</div>
 
 <!-- 列表信息 -->
<table class="layui-hide" id="test" lay-filter="test"></table>
 
 <!-- 头工具栏信息 -->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>
 
 <!-- 编辑信息 -->
 <div id="edituser" style="display:none">
 <!-- 这里给一个弹出表单 -->
<form class="layui-form" lay-filter="example">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="uName" id="uName" lay-verify="title" autocomplete="off" readonly="readonly" placeholder="请输入用户名" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-block">
      <input type="password" name="uPwd" id="uPwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="uSex" id="uSex-1" value="男" title="男" checked="">
      <input type="radio" name="uSex" id="uSex-2" value="女" title="女">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">状态</label>
    <div class="layui-input-block">
      <select name="uState" id="uState" lay-filter="aihao">
        <option value="0" id="open">启用</option>
        <option value="1" id="close">禁用</option>
      </select>
    </div>
  </div>
  
  
  <!-- <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读">
      <input type="checkbox" name="like[daze]" title="发呆">
    </div>
  </div> -->
  
  <!-- <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
    </div>
  </div> -->
  
  
 <!--  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
    </div>
  </div> -->
 
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn btn-update" type="button" lay-submit="" lay-filter="demo1">保存</button>
    </div>
  </div>
</form>
 
 </div>
 
 
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
              
          
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 
 
<script>
//列表
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#test'
    ,url:'user/list'
    ,toolbar: '#toolbarDemo'
    ,title: '用户数据表'
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{field:'uId', title:'编码', width:80, fixed: 'left', unresize: true, sort: true}
      ,{field:'uName', title:'用户名', width:120, edit: 'text'}
      ,{field:'uPwd', title:'密码', width:80, edit: 'text', sort: true}
      ,{field:'uSex', title:'性别', width:100}
      ,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
          return '<em>'+ res.email +'</em>'
        }}
      ,{field:'uState', title:'状态', width:150, templet:function(res){
    	  return res.uState==0? "启用" : "禁用";
      }}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]]
    ,page: true
    //这里添加执行重载的id名
    ,id:'testReload'
  });
  
  //表格数据重载，模糊查询
  var $ = layui.$, active = {
		    reload: function(){
		      var demoReload = $('#demoReload');
		      
		      //执行重载
		      table.reload('testReload', {
		        page: {
		          curr: 1 //重新从第 1 页开始
		        }
		        ,where: {
		          //这里传值给servlet
		          content : demoReload.val()
		        }
		      });
		    }
		  };
		  
		  $('.demoTable .layui-btn').on('click', function(){
		    var type = $(this).data('type');
		    active[type] ? active[type].call(this) : '';
		  });
  
  
  //头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'getCheckData':
        var data = checkStatus.data;
        layer.alert(JSON.stringify(data));
      break;
      case 'getCheckLength':
        var data = checkStatus.data;
        layer.msg('选中了：'+ data.length + ' 个');
      break;
      case 'isAll':
        layer.msg(checkStatus.isAll ? '全选': '未全选');
      break;
    };
  });
  
  //监听行工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data;
    //console.log(obj)
    if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
    	  
    	//ajax的删除，把uId传递到servlet
    	$.post("user/del","uId="+data.uId,function(cm){
    		obj.del();
            layer.close(index);
            layer.msg(cm.msg);
    				
    	});  
    	
      });
    } else if(obj.event === 'edit'){
        
    	
    	//给表单元素赋值
    	$("#uName").attr("value",data.uName);
    	$("#uPwd").attr("value",data.uPwd);
    	

    	if(data.uSex=="女"){//设置性别,针对checked属性：[如果弹出层open()的 content:$("#edituser")没有.html,则用prop]
    		                                     //[如果弹出层open()的 content:$("#edituser").html,则用attr]
    		$("input[name='uSex'][value='女']").prop("checked",true);
    		$("input[name='uSex'][value='男']").prop("checked",false);
    	}else{
    		$("input[name='uSex'][value='男']").prop("checked",true);
    		$("input[name='uSex'][value='女']").prop("checked",false);
    	}
    	layui.form.render('radio');
    	
    	
    	if(data.uState==0){//设置状态
    		$("#open").attr("selected",true);
    		$("#close").attr("selected",false);
    	}else{
    		$("#open").attr("selected",false);
    		$("#close").attr("selected",true);
    	}
    	
    	
    	
    	//添加一个弹出层
    	layer.open({
    		type:1,    		
    		content:$("#edituser"),//这里弹出的内容是div的id为edituser
    		title:'修改用户信息',
    		area: ['700px', '500px']
    		
    		
    	});
    	
    	layui.form.render();//这个是表单的render，用于处理单选框、按钮、多选框不能被选中的问题
    	
    	
    	/* layer.prompt({
        formType: 2
        //,value: data.email
        //显示所有的信息
        ,value:JSON.stringify(data)
      }, function(value, index){
        obj.update({
          email: value
        });
        layer.close(index);
        
      }); */
    	
    	
    }
  });
  
  //监听提交
  //方法一：
 /*  $(document).on("click",".btn-update",function(){
	  //可以实现，比较麻烦点
	  console.log("click");
  }); */
  
  //方法二：
  layui.form.on('submit(demo1)',function(data){
	  console.log(JSON.stringify(data.field));
	 /*  layer.alert(JSON.stringify(data.field),{
		  title : '最终的提交信息'
	  }); */
	  
	  $.ajax({
		  type : "post",
		  url : "user/up",
		  data : JSON.stringify(data.field),
		  contentType : "application/json",
		  success : function(cm){
			  layer.msg(cm.msg,{time : 2000},function(){
				if(cm.msg=="修改成功"){
					parent.layer.closeAll();
					window.parent.location.reload();
				}  
			  });
		  }
	  
	  });
	  
	  
	  return false;
  });
  
  
});
</script>

</body>
</html>